<template>
  <!-- 头部组件
      当滚轮到底部的距离不为0时
 -->
  <div
    class="header"
    :style="
      $store.state.scrollTop != 0 && {
        'background-color': '#fff',
        height: '60px',
      }
    "
  >
    <!-- 头部容器 -->
    <div class="headerWrp">
      <!-- logo和菜单组件 -->
      <LogoNavCps />
      <!-- 立即使用按钮组件 -->
      <UseNow />
      <MoreBtn @sendIsShowMore="getIsShowMore" />
    </div>
    <!-- 更多内容区 -->
    <Morecps v-if="isShowMore" />
  </div>
</template>

<script>
// 引入组件
import Morecps from "@/components/global/Header/MoreCps.vue";
import LogoNavCps from "@/components/global/Header/LogoNavCps";
import UseNow from "@/components/global/Header/UseNowCps";
import MoreBtn from "@/components/global/Header/MoreBtnCps";
export default {
  name: "Header",
  // 注册组件
  components: {
    Morecps,
    LogoNavCps,
    UseNow,
    MoreBtn,
  },
  data() {
    return {
      // 两种不同的logo
      logoImg: [
        require("../../images/logo1.png"),
        require("../../images/logo.png"),
      ],
      // 是否显示更多
      isShowMore: false,
    };
  },
  mounted() {
    // 设置监听滚动事件，当滚轮时回调handleScroll方法
    window.addEventListener("scroll", this.handleScroll);
    // 设置监听窗口大小事件，当窗口大小改变时回调handleResize方法
    window.addEventListener("resize", this.handleResize);
    // 初始化窗口大小
    this.handleResize();
  },
  methods: {
    // 滚轮事件回调
    handleScroll() {
      // 通过vuex修改setScrollTop
      this.$store.commit(
        "setScrollTop",
        document.body.scrollTop || document.documentElement.scrollTop
      );
      // 如果滚轮到顶部的距离为0
      if (this.$store.state.scrollTop == 0) {
        // 如果窗口宽度小于1024
        if (this.$store.state.screenWidth < 1009) {
          // 假装滚轮到顶部的距离不为0
          // 通过vuex修改setScrollTop
          this.$store.commit("setScrollTop", 1);
          // 将more设置为top=60px
          this.$bus.$emit("getHeaderHeight", false);
        } else {
          // 将more设置为top=100px
          this.$bus.$emit("getHeaderHeight", true);
        }
      } else {
        // 将more设置为top=60px
        this.$bus.$emit("getHeaderHeight", false);
      }
    },
    // 窗口事件回调
    handleResize() {
      // 通过vuex修改窗口宽度
      this.$store.commit("setScreenWidth", document.body.clientWidth);
      // 获取元素
      var header = document.querySelector(".header"); //头部组件
      var logoimg = document.querySelector(".logoimg"); //logo图
      var qingji = document.querySelector(".qingji"); //logo文字
      // 屏幕宽度小于1009时
      if (this.$store.state.screenWidth < 1009 && header) {
        // 修改头部组件的背景颜色为白色
        header.style.backgroundColor = "#fff";
        // 修改头部组件的高度
        header.style.height = "60px";
        // 修改logo图
        logoimg.src = this.logoImg[1];
        // 修改logo文字的字体颜色
        qingji.style.color = "#0182c7";
        //调用morecps绑定的自定义事件,并将数据发送过去
        this.$bus.$emit("getHeaderHeight", false);
      } else {
        //屏幕宽度大于1009时
        // 通过vuex修改setScrollTop
        this.$store.commit(
          "setScrollTop",
          document.body.scrollTop || document.documentElement.scrollTop
        );
        // 如果滚轮到顶部的距离为0
        if (this.$store.state.scrollTop == 0 && header) {
            // 修改头部组件的背景颜色
            header.style.backgroundColor = "transparent";
            // 修改头部组件的高度
            header.style.height = "100px";
            // 修改logo图
            logoimg.src = this.logoImg[0];
            // 修改logo文字的字体颜色
            qingji.style.color = "#fff";
            //调用morecps绑定的自定义事件,并将数据发送过去
            this.$bus.$emit("getHeaderHeight", true);
        }
      }
    },
    // 获取isShowMore
    getIsShowMore(isShowMore) {
      this.isShowMore = isShowMore;
    },
  },
};
</script>

<style lang="less" scoped>
// 头部组件
.header {
  // 过度效果
  transition: all 200ms ease-in-out 0s;
  // 宽高
  height: 100px;
  width: 100%;
  // 透明背景
  background-color: transparent;
  // 弹性盒子
  display: flex;
  // 子元素水平垂直居中
  align-items: center;
  justify-content: center;
  // 固定定位
  position: fixed;
  // 始终位于窗口上方
  top: 0;
  // 层级
  z-index: 1000;
  // 子元素水平垂直居中,好像没啥用
  -webkit-box-align: center;
  -webkit-box-pack: center;
  // 头部容器
  .headerWrp {
    // 宽
    width: 1000px;
    // 层级
    z-index: 1000;
    // 弹性盒
    display: flex;
    // 垂直居中
    align-items: center;
    // 子元素往两边靠
    justify-content: space-between;
    // 内边距
    padding: 0 50px;
  }
}
/*在浏览器视口宽小于768px时生效*/
@media (max-width: 768px) {
  // 头部容器
  .header .headerWrp {
    // 宽
    width: 100%;
    // 内边距
    padding: 0 10px;
  }
}
/*在浏览器视口宽小于375px时生效*/
@media (max-width: 375px) {
  // 头部容器
  .header .headerWrp {
    // 宽
    width: 100%;
    // 内边距
    padding: 0 10px;
  }
}
</style>